<template>
  <div class="order">
    <fuChuangZi></fuChuangZi>
    <van-tabs :active="active" @change="onChange" >
      <van-tab  class="noOrder" title="未评价">
        <van-card >
          <div slot="thumb" class="thumb">
            <van-image fit="cover" width="200rpx" height="200rpx"      src="/static/images/icon.jpg"></van-image>
          </div>
          <div slot="tags" class="tags">
            <span>好评率：90%</span>
            <van-rate value= 4.5 allow-half="true"	 count= 5 readonly="true"></van-rate>
          </div>
          <div slot="desc" class="desc">
            <div>快递公司：顺丰快递</div>
          </div>
          <div slot="title" class="title">
            <span class="title-1">商品标题：abcdefghijk</span>
            <span class="price">5-10/时</span>
          </div>
          <div slot="bottom" class="bottom">
            <van-icon name="/static/images/icon/position.png"></van-icon>
            <span>成信大</span>
            <span class="time">
          <van-button round type="info" size="mini" plain @click="toHelp">申诉</van-button>
          <van-button round type="info" size="mini" plain @click="toEvaluate">评价</van-button>
        </span>
          </div>
        </van-card>
        <van-card >
          <div slot="thumb" class="thumb">
            <van-image fit="cover" width="200rpx" height="200rpx"      src="/static/images/icon.jpg"></van-image>
          </div>
          <div slot="tags" class="tags">
            <span>好评率：90%</span>
            <van-rate value= 4.5 allow-half="true"	 count= 5 readonly="true"></van-rate>
          </div>
          <div slot="desc" class="desc">
            <div>快递公司：顺丰快递</div>
          </div>
          <div slot="title" class="title">
            <span class="title-1">商品标题：abcdefghijk</span>
            <span class="price">5-10/时</span>
          </div>
          <div slot="bottom" class="bottom">
            <van-icon name="/static/images/icon/position.png"></van-icon>
            <span>成信大</span>
            <span class="time">
          <van-button round type="info" size="mini" plain @click="toHelp">申诉</van-button>
          <van-button round type="info" size="mini" plain @click="toEvaluate">评价</van-button>
        </span>
          </div>
        </van-card>
        <van-card >
          <div slot="thumb" class="thumb">
            <van-image fit="cover" width="200rpx" height="200rpx"      src="/static/images/icon.jpg"></van-image>
          </div>
          <div slot="tags" class="tags">
            <span>好评率：90%</span>
            <van-rate value= 4.5 allow-half="true"	 count= 5 readonly="true"></van-rate>
          </div>
          <div slot="desc" class="desc">
            <div>快递公司：顺丰快递</div>
          </div>
          <div slot="title" class="title">
            <span class="title-1">商品标题：abcdefghijk</span>
            <span class="price">5-10/时</span>
          </div>
          <div slot="bottom" class="bottom">
            <van-icon name="/static/images/icon/position.png"></van-icon>
            <span>成信大</span>
            <span class="time">
          <van-button round type="info" size="mini" plain @click="toHelp">申诉</van-button>
          <van-button round type="info" size="mini" plain @click="toEvaluate">评价</van-button>
        </span>
          </div>
        </van-card>
        <van-card >
          <div slot="thumb" class="thumb">
            <van-image fit="cover" width="200rpx" height="200rpx"      src="/static/images/icon.jpg"></van-image>
          </div>
          <div slot="tags" class="tags">
            <span>好评率：90%</span>
            <van-rate value= 4.5 allow-half="true"	 count= 5 readonly="true"></van-rate>
          </div>
          <div slot="desc" class="desc">
            <div>快递公司：顺丰快递</div>
          </div>
          <div slot="title" class="title">
            <span class="title-1">商品标题：abcdefghijk</span>
            <span class="price">5-10/时</span>
          </div>
          <div slot="bottom" class="bottom">
            <van-icon name="/static/images/icon/position.png"></van-icon>
            <span>成信大</span>
            <span class="time">
          <van-button round type="info" size="mini" plain @click="toHelp">申诉</van-button>
          <van-button round type="info" size="mini" plain @click="toEvaluate">评价</van-button>
        </span>
          </div>
        </van-card>
        <van-card >
          <div slot="thumb" class="thumb">
            <van-image fit="cover" width="200rpx" height="200rpx"      src="/static/images/icon.jpg"></van-image>
          </div>
          <div slot="tags" class="tags">
            <span>好评率：90%</span>
            <van-rate value= 4.5 allow-half="true"	 count= 5 readonly="true"></van-rate>
          </div>
          <div slot="desc" class="desc">
            <div>快递公司：顺丰快递</div>
          </div>
          <div slot="title" class="title">
            <span class="title-1">商品标题：abcdefghijk</span>
            <span class="price">5-10/时</span>
          </div>
          <div slot="bottom" class="bottom">
            <van-icon name="/static/images/icon/position.png"></van-icon>
            <span>成信大</span>
            <span class="time">
          <van-button round type="info" size="mini" plain @click="toHelp">申诉</van-button>
          <van-button round type="info" size="mini" plain @click="toEvaluate">评价</van-button>
        </span>
          </div>
        </van-card>
        <van-card >
          <div slot="thumb" class="thumb">
            <van-image fit="cover" width="200rpx" height="200rpx"      src="/static/images/icon.jpg"></van-image>
          </div>
          <div slot="tags" class="tags">
            <span>好评率：90%</span>
            <van-rate value= 4.5 allow-half="true"	 count= 5 readonly="true"></van-rate>
          </div>
          <div slot="desc" class="desc">
            <div>快递公司：顺丰快递</div>
          </div>
          <div slot="title" class="title">
            <span class="title-1">商品标题：abcdefghijk</span>
            <span class="price">5-10/时</span>
          </div>
          <div slot="bottom" class="bottom">
            <van-icon name="/static/images/icon/position.png"></van-icon>
            <span>成信大</span>
            <span class="time">
          <van-button round type="info" size="mini" plain @click="toHelp">申诉</van-button>
          <van-button round type="info" size="mini" plain @click="toEvaluate">评价</van-button>
        </span>
          </div>
        </van-card>
        <van-card >
          <div slot="thumb" class="thumb">
            <van-image fit="cover" width="200rpx" height="200rpx"      src="/static/images/icon.jpg"></van-image>
          </div>
          <div slot="tags" class="tags">
            <span>好评率：90%</span>
            <van-rate value= 4.5 allow-half="true"	 count= 5 readonly="true"></van-rate>
          </div>
          <div slot="desc" class="desc">
            <div>快递公司：顺丰快递</div>
          </div>
          <div slot="title" class="title">
            <span class="title-1">商品标题：abcdefghijk</span>
            <span class="price">5-10/时</span>
          </div>
          <div slot="bottom" class="bottom">
            <van-icon name="/static/images/icon/position.png"></van-icon>
            <span>成信大</span>
            <span class="time">
          <van-button round type="info" size="mini" plain @click="toHelp">申诉</van-button>
          <van-button round type="info" size="mini" plain @click="toEvaluate">评价</van-button>
        </span>
          </div>
        </van-card>

      </van-tab>
      <van-tab  class="havedOrder" title="已评价">
        <van-card >
        <div slot="thumb" class="thumb">
          <van-image fit="cover" width="200rpx" height="200rpx"      src="/static/images/icon.jpg"></van-image>
        </div>
        <div slot="tags" class="tags">
          <span>好评率：90%</span>
          <van-rate value= 4.5 allow-half="true"	 count= 5 readonly="true"></van-rate>
        </div>
        <div slot="desc" class="desc">
          <div>快递公司：顺丰快递</div>
        </div>
        <div slot="title" class="title">
          <span class="title-1">商品标题：abcdefghijk</span>
          <span class="price">5-10/时</span>
        </div>
        <div slot="bottom" class="bottom">
          <van-icon name="/static/images/icon/position.png"></van-icon>
          <span>成信大</span>
          <span class="time">
          <van-button round type="info" size="mini" style="margin-left: 70rpx;" plain >已评价</van-button>
        </span>
        </div>
      </van-card>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
  import fuChuangZi from '../../components/fuChuangZi/fuChuangZi.vue'

export default {
  components: {
    fuChuangZi
  },
  data () {
    return {
      active: 0
      }
    },
  methods: {
    toHelp(){
      wx.navigateTo({
        url: "/pages/help/main"
      })
    },
    toEvaluate(){
      wx.navigateTo({
        url: "/pages/evaluate/main"
      })
    }
  }
  }



</script>

<style lang="stylus" rel="stylesheet/stylus">
.order
  van-tabs
    van-tab
      van-card
        width 100%
        height 200rpx
        border-bottom 1rpx solid rgb(235, 237, 240)
        margin-bottom 5rpx
        .title
          .title-1
            font-weight bold
          .price
            display inline-block
            float right
        .desc
          display block
          width 100%
          height 40rpx
          margin-top 10rpx
        .bottom
          display block
          width 100%
          margin-top 10rpx
          height 40rpx
          line-height 40rpx
          van-icon
            display inline-block
            line-height 40rpx
          .time
            display inline-block
            float right
            line-height 40rpx
            width 240rpx
            height 40rpx
            display flex
            van-button
              display inline-block
              line-height 40rpx
              margin-right 20rpx
        .tags
          display: inline-block
          margin-bottom 5rpx
          height 50rpx
          span
            font-size 30rpx
            display inline-block
            height 60rpx
            line-height 60rpx
            margin-right 30rpx
            margin-bottom  5rpx
          van-rate
            display inline-block
            height 60rpx
            line-height 60rpx

</style>
